<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>广州天气预报</title>
        <style>
            :root {
                --primary-color: #2196f3;
                --warning-color: #ff9800;
            }

            body {
                font-family: "Segoe UI", system-ui;
                background: #f0f2f5;
                margin: 0;
                padding: 20px;
            }

            .weather-card {
                background: white;
                border-radius: 12px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                padding: 24px;
                margin-bottom: 20px;
            }

            .current-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
            }

            .aqi-badge {
                background: var(--primary-color);
                color: white;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.9em;
            }

            .forecast-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                gap: 15px;
                margin-top: 20px;
            }

            .forecast-item {
                padding: 15px;
                background: #f8f9fa;
                border-radius: 8px;
                transition: transform 0.2s;
            }

            .forecast-item:hover {
                transform: translateY(-3px);
            }

            .temperature-bar {
                height: 4px;
                background: #e0e0e0;
                border-radius: 2px;
                margin: 10px 0;
                position: relative;
            }

            .temperature-fill {
                height: 100%;
                background: linear-gradient(90deg, #64b5f6, #2196f3);
                border-radius: 2px;
            }

            .loading {
                text-align: center;
                padding: 30px;
                font-size: 1.2em;
                color: #666;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="loading">正在加载天气数据...</div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script>
            // 天气图标映射
            const weatherIcons = {
                晴: "☀️",
                多云: "⛅",
                阴: "☁️",
                雨: "🌧️",
                雪: "❄️",
            };
            // 温度解析函数
            function parseTemperature(str) {
                return parseInt(str.match(/\d+/)[0]);
            }
            async function fetchWeather() {
                try {
                    const app = document.getElementById("app");

                    // 发起请求
                    const response = await fetch(
                        "http://lattiexiep.com/weather/city/101280101",
                        {
                            method: "GET",
                            headers: {
                                "User-Agent":
                                    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36",
                                Referer: "http://t.weather.sojson.com/",
                                Accept: "application/json",
                            },
                        }
                    );

                    // 获取响应的文本内容，查看返回数据
                    const text = await response.text();
                    console.log("返回的原始数据:", text); // 打印原始响应内容

                    // 尝试解析 JSON 数据
                    const data = JSON.parse(text); // 手动解析数据

                    // 如果返回的数据是正确的 JSON 数据，则继续处理
                    const { status, cityInfo, data: weatherData } = data;

                    if (status !== 200) {
                        app.innerHTML =
                            '<div class="weather-card">数据加载失败，请稍后重试</div>';
                        return;
                    }

                    // 显示天气数据的逻辑...
                    const currentHtml = `
                <div class="weather-card">
                    <div class="current-header">
                        <h2>${cityInfo.city}实时天气</h2>
                        <div class="aqi-badge">AQI ${weatherData.pm25}</div>
                    </div>

                    <div class="current-body">
                        <p>🌡️ 温度：${weatherData.wendu}℃</p>
                        <p>💧 湿度：${weatherData.shidu}</p>
                        <p>🍃 空气质量：${weatherData.quality}</p>
                        <p>📢 温馨提示：${weatherData.ganmao}</p>
                        <p>🕒 更新时间：${cityInfo.updateTime}</p>
                    </div>
                </div>
            `;

                    const forecastHtml = `
                <div class="weather-card">
                    <h3>未来15天预报</h3>
                    <div class="forecast-grid">
                        ${weatherData.forecast
                            .map(
                                (day) => `
                            <div class="forecast-item">
                                <div style="margin-bottom:8px">
                                    ${weatherIcons[day.type] || "🌈"}
                                    <strong>${day.ymd
                                        .split("-")
                                        .slice(1)
                                        .join("/")}</strong>
                                    (${day.week.replace("星期", "周")})
                                </div>
                                <div>${day.type}</div>

                                <div class="temperature-bar">
                                    <div class="temperature-fill" style="width: ${
                                        ((parseTemperature(day.high) -
                                            parseTemperature(day.low)) /
                                            25) *
                                        100
                                    }%"></div>
                                </div>

                                <div style="color:var(--primary-color)">
                                    ${day.low} ~ ${day.high}
                                </div>
                                <div>${day.fx} ${day.fl}</div>
                            </div>
                        `
                            )
                            .join("")}
                    </div>
                </div>
            `;

                    app.innerHTML = currentHtml + forecastHtml;
                } catch (error) {
                    console.error("请求失败:", error);
                    document.getElementById("app").innerHTML = `
                <div class="weather-card">
                    <h3 style="color:var(--warning-color)">数据加载失败</h3>
                    <p>错误信息：${error.message}</p>
                    <button onclick="location.reload()">点击重试</button>
                </div>
            `;
                }
            }
            // 页面加载时执行
            window.addEventListener("DOMContentLoaded", fetchWeather);
        </script>
    </body>
</html>
